import React from "react";
import "./index.css";
class NumberList extends React.Component {
  state = { state: 0 };
  OddBtn = () => {
    this.setState({ state: 1 });
  };
  EvenBtn = () => {
    this.setState({ state: 2 });
  };
  RemakeBtn = () => {
    this.setState({ state: 0 });
  };
  render() {
    const list = [2, 4, 6, 8, 10];
    return (
      <>
        <button onClick={this.OddBtn}>奇数行加深</button>
        <button onClick={this.EvenBtn}>偶数行加深</button>
        <button onClick={this.RemakeBtn}>正常展示</button>
        <div>
          {this.state.stat === 2
            ? list.map((item, index) => {
                const isEven = !!(index % 2);
                const cls = `line ${isEven ? "line--eve" : ""}`;
                return (
                  <p key={item} className={cls}>
                    {item}
                  </p>
                );
              })
            : this.state.stat === 1
            ? list.map((item, index) => {
                const isEven = !!((index + 1) % 2);
                const cls = `line ${isEven ? "line--eve" : ""}`;
                return (
                  <p key={item} className={cls}>
                    {item}
                  </p>
                );
              })
            : list.map((item, index) => {
                const cls = "line";
                return (
                  <p className={cls} key={item}>
                    {item}
                  </p>
                );
              })}
        </div>
      </>
    );
  }
}
export default NumberList;
